<template>
  <div class="container">
    <div class="app-container">
      <!-- default-expand-all： 默认展开全部·节点 -->
      <el-tree :data="treeNodes" :props="defaultProps" default-expand-all :expand-on-click-node="false">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <!-- 左侧节点信息（界面的名字：label） -->
          <span>{{ node.label }}</span>
          <!-- 右侧操作信息：下拉菜单 -->
          <span>
            <span class="manager">管理员</span>
            <el-dropdown @command="handleCommand($event, data.id)">
              <span class="el-dropdown-link">
                操作 <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item command="update">编辑部门</el-dropdown-item>
                <el-dropdown-item command="remove">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      </el-tree>
    </div>
    <!-- 添加子部门弹框组件 -->
    <!-- showDailog: 是子组件的入参：表示什么时候要开始干活了 -->
    <!-- @done: 是子组件的出参，表示事情干完了 ==> 当前的组件要重新获取组织架构数据，更新 -->
    <AddDeptVue ref="addDept" :pid="parentId" :show-dialog.sync="showDialog" @done="getDepartmentList" />
  </div>
</template>
<script>
import { getDepartments, deleteDepartment } from '@/api/department'
import { translateListToTree } from '@/utils/index'
// 引入添加子部门的弹框组件
import AddDeptVue from './AddDept.vue'

export default {
  name: 'Department',
  components: {
    AddDeptVue
  },
  data() {
    return {
      parentId: 0,
      // 树形组件的默认数据：空数组
      treeNodes: [],
      defaultProps: {
        // 节点字段到数据字段的映射
        label: 'name',
        children: 'children'
      },
      // 是否显示 addDept 弹框，默认不显示
      showDialog: false
    }
  },
  created() {
    // 调接口，获取部门数据
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const res = await getDepartments()
      // this.treeNodes = res
      // 从 res 中找到所有 pid 为 0 的项
      // 最终：treeNodes 中只有 pid 为 0 的项
      this.treeNodes = translateListToTree(res, 0)
    },
    async handleCommand(cmd, id) {
      console.log(cmd, id)
      // id: 是要操作的节点的id
      // 当 cmd 是 add 的时候，表示要给 当前id 这个节点，添加一个子节点
      // 所以，当前的这个 id，就是新的子节点的 pid
      this.parentId = id
      if (cmd === 'add') {
        // 添加子部门：就应该显示添加子部门的弹框
        this.showDialog = true
      } else if (cmd === 'update') {
        // 要去编辑节点
        // 要做什么：子组件要获取当前的节点数据，并回显到表单中
        await this.$refs.addDept.getDepartmentDetail(id)
        // 再让子组件弹框显示出来
        this.showDialog = true
      } else if (cmd === 'remove') {
        // 执行删除操作：1. 请求删除的接口 2. 刷新页面（重新获取组织列表）
        this.$confirm('你确认要删除这个部门吗？')
          .then(async() => {
            // 确认删除
            // console.log('确认删除')
            // 执行真正的删除操作：调接口
            await deleteDepartment(id)
            this.$message.success('部门删除成功')
            // 重新获取组织列表，显示到页面上
            this.getDepartmentList()
          }).catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.manager {
  margin-right: 20px;
}
</style>
